<template>
    <el-form class="login-form"
             status-icon
             :rules="loginRules"
             ref="loginForm"
             :model="loginForm"
             label-width="0">
        <el-form-item prop="username">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.username"
                      auto-complete="off"
                      placeholder="请输入用户名">
                <i slot="prefix"
                   class="icon-yonghu"></i>
            </el-input>
        </el-form-item>

        <el-form-item prop="password">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      :type="passwordType"
                      v-model="loginForm.password"
                      auto-complete="off"
                      placeholder="请输入密码">
                <i class="el-icon-view el-input__icon"
                   slot="suffix"
                   @click="showPassword"></i>
                <i slot="prefix"
                   class="icon-mima"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="affirmPassword">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      :type="passwordType"
                      v-model="loginForm.affirmPassword"
                      auto-complete="off"
                      placeholder="请输入确认密码">
                <i class="el-icon-view el-input__icon"
                   slot="suffix"
                   @click="showPassword"></i>
                <i slot="prefix"
                   class="icon-mima"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="phone">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.phone"
                      auto-complete="off"
                      placeholder="请输入手机号码">
                <i slot="prefix"
                   class="icon-shouji"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="code">
            <el-input size="small"
                      @keyup.enter.native="handleLogin"
                      v-model="loginForm.code"
                      auto-complete="off"
                      placeholder="请输入验证码">
                <i slot="prefix"
                   class="icon-yanzhengma"
                   style="margin-top:6px;"></i>
                <template slot="append">
          <span @click="handleSend"
                class="msg-text"
                :class="[{display:msgKey}]">{{msgText}}</span>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
                       size="small"
                       @click.native.prevent="handleRegister"
                       class="login-submit">注 册
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    const MSGINIT = "发送验证码",
        // MSGERROR = "验证码发送失败",
        MSGSCUCCESS = "${time}秒后重发",
        MSGTIME = 60;
    import {isvalidatemobile} from "@/util/validate";
    import {randomLenNum} from "@/util/util";
    import {mapGetters} from "vuex";
    import { userRegister } from "@/api/user";
    export default {
        name: "userlogin",
        data() {
            const validatePhone = (rule, value, callback) => {
                if (isvalidatemobile(value)[0]) {
                    callback(new Error(isvalidatemobile(value)[1]));
                } else {
                    callback();
                }
            };
            const validateCode = (rule, value, callback) => {
                if (value.length != 4) {
                    callback(new Error("请输入4位数的验证码"));
                } else {
                    callback();
                }
            };
            return {
                msgText: MSGINIT,
                msgTime: MSGTIME,
                msgKey: false,
                loginForm: {
                    username: "admin",
                    password: "123",
                    affirmPassword: "",
                    code: "",
                    redomStr: ""
                },
                checked: false,
                code: {
                    src: "",
                    value: "",
                    len: 4,
                    type: "text"
                },
                loginRules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    password: [
                        {
                            required: true, trigger: "", validator: (rule, value, callback) => {
                                if (value !== null && value !== "") {
                                    if (value !== this.loginForm.affirmPassword) {
                                        callback(new Error("请输入密码不一致"));
                                    }else {
                                        callback();
                                    }
                                }else {
                                    callback(new Error("请再次输入密码"));
                                }
                            }
                        },
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {min: 3, message: "密码长度最少为6位", trigger: "blur"}
                    ],
                    affirmPassword: [
                        {required: true, message: "请再次输入密码", trigger: "blur"},
                        {min: 3, message: "密码长度两次必须一致", trigger: "blur"},{
                        required: true, trigger: "", validator: (rule, value, callback) => {
                            if (value !== null && value !== "") {
                                if (value !== this.loginForm.password) {
                                    callback(new Error("请输入密码不一致"));
                                } else {
                                    callback();
                                }
                            }else {
                                callback(new Error("请再次输入密码"));
                            }
                        }
                    }],
                    phone: [{required: true, trigger: "blur", validator: validatePhone}],
                    code: [{required: true, trigger: "blur", validator: validateCode}]
                },
                passwordType: "password"
            };
        },
        created() {
            this.refreshCode();
        },
        mounted() {
        },
        computed: {
            ...mapGetters(["tagWel"])
        },
        props: [],
        methods: {
            handleSend() {
                if (this.msgKey) return;
                this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
                this.msgKey = true;
                const time = setInterval(() => {
                    this.msgTime--;
                    this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
                    if (this.msgTime == 0) {
                        this.msgTime = MSGTIME;
                        this.msgText = MSGINIT;
                        this.msgKey = false;
                        clearInterval(time);
                    }
                }, 1000);
            },
            refreshCode() {
                this.loginForm.redomStr = randomLenNum(this.code.len, true);
                this.code.type == "text"
                    ? (this.code.value = randomLenNum(this.code.len))
                    : (this.code.src = `${this.codeUrl}/${this.loginForm.redomStr}`);
                this.loginForm.code = this.code.value;
            },
            showPassword() {
                this.passwordType === "text"
                    ? (this.passwordType = "password")
                    : (this.passwordType = "text");
            },
            handleRegister() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        const dto=this.loginForm;
                        userRegister(dto).then(res => {
                            if (res.data.code===500){
                                this.$message.error(res.data.message)
                            }else {
                                this.$emit("activeName",user)
                                this.$message.success(res.data.message)
                            }
                        }).catch(err => {
                            this.$message.error(err)
                        })
                    }
                });
            },

        }
    };
</script>

<style>
</style>
